<template>
	<view class="safe">
		<view class="set-list">
			<view class="list_li" @tap="recharge">
				<view class="li-left">
					<text class="left-text">{{t('user.avatar')}}</text>
				</view>
				<view class="li-right">
					<image :src="urlConversion(String(avatar))" mode="" class="right-img"></image>
					<image src="@/static/imgs/my/arrow_right.png" mode="" class="right-icon"></image>
				</view>

			</view>
			<view class="list_li" @tap="gopath(`setuser?name=${nickname || telnumber}`)">
				<view class="li-left">

					<text class="left-text">{{t('user.nickname')}}</text>
				</view>
				<view class="li-right">
					<text class="right-text" v-if="nickname!=''">{{nickname}}</text>
					<text class="right-text" v-else>{{telnumber}}</text>
					<image src="@/static/imgs/my/arrow_right.png" mode="" class="right-icon"></image>
				</view>
			</view>
			<view class="list_li">
				<view class="li-left">
					<text class="left-text">{{t('user.moible')}}</text>
				</view>
				<view class="li-right">
					<text class="right-text" style="margin-right: 0;">{{telnumber}}</text>
				</view>
			</view>


		</view>
		<view class="marign">

		</view>
		<view class="list_li1">
			<view class="li-left1">
				<text class="left-text1">UID</text>
			</view>
			<view class="li-right1">
				<text class="right-text1" style="margin-right: 0;">{{Uid}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import configUrl  from '@/api/config.js'
	import {
		ucInfo,ucEdit
	} from '@/api/setuserinfo/setuserinfo.js'
	import {
		onLoad,onShow
	} from "@dcloudio/uni-app";
	import {
		urlConversion
	} from '@/utils/imgUrl.js'
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
import { ref } from "vue";
	const nickname = ref()
	const avatar = ref()
	
	const telnumber = ref()
	const Uid = ref()
	onLoad(()=>{
		getuserinfo()
	})
	onShow(() =>{
		getuserinfo()
	})
	const unopen = () => {
		uni.showToast({
			icon: 'none',
			title:  t('user.Notopenyet'),
		});
	}

	const gopath = (path) => {
		if (!path) return unopen()
		if (path) {
			uni.navigateTo({
				url: path,
			});
		}
	}
	const getuserinfo = () => {
		uni.setNavigationBarTitle({
			title: t('user.setting')
		});
		ucInfo().then(res => {
		
			nickname.value = res.data.nickname
			Uid.value = res.data.id
			  avatar.value =res.data.avatar
			telnumber.value = res.data.mobile
	
		})
	}
	const recharge =() => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: files => {
				console.log('files', files);
				upload(files.tempFilePaths[0])
			}
		})
	}
	const upload =(file) => {
		let data = {
			type: 1,
			file: file
		}
		uni.uploadFile({
			url: configUrl.http_url + '/upload/image',
			filePath: file,
			name: 'file',
			formData: data,
			header: {
				"Authorization": uni.getStorageSync('token'),
				
			},
			success: (uploadFileRes) => {
				console.log(JSON.parse(uploadFileRes.data));
				let uploadFile = JSON.parse(uploadFileRes.data)
				console.log('uploadFile', uploadFile);
				edit(uploadFile.data.save_url);
			}
		});
	}
	const edit = (path) =>{
		let data ={
			avatar:path
		}
		ucEdit(data).then(res =>{
			console.log(res);
			if(res.code ==200){
				getuserinfo()
				uni.showToast({
					title:'修改成功'
				})
			}
		})
	}
</script>

<style scoped lang="scss">
	.safe {
		width: 100%;
		min-height: 100vh;
		background-color: #F2F4F7;
		padding-top: 16rpx;
	}

	.logout {
		background-color: #fff;
		margin-top: 16rpx;
		width: 100%;
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 22.4px;
		color: rgba(212, 48, 48, 1);
	}

	.set-list {


		width: 100%;
		padding: 36rpx;
		padding-bottom: 0;
		padding-top: 0;
		opacity: 1;

		background: #fff;

		.list_li:last-child {
			border-bottom: none;
		}

	

		.list_li {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: content-box;
			padding-top: 36rpx;
			padding-bottom: 36rpx;
			border-bottom: 1px solid rgba(242, 244, 247, 1);

			.li-right {
				display: flex;
				align-items: center;

				.right-icon {
					height: 26rpx;
					width: 14rpx;
				}

				.right-img {
					width: 84rpx;
					height: 84rpx;
					margin-right: 40rpx;
				}

				.right-text {
					font-size: 16px;
					font-weight: 500;
					letter-spacing: 0px;
					line-height: 22.4px;
					color: rgba(34, 34, 34, 1);
					margin-right: 40rpx;
				}

			}

			.li-left {
				display: flex;
				align-items: center;

				.left-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}

				.left-text {
					font-size: 16px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 23.17px;
					color: rgba(107, 118, 130, 1);
				}
			}
		}
	}
	.list_li1 {
		margin-top: 16rpx;
		padding: 36rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding-top: 36rpx;
		padding-bottom: 36rpx;
		border-bottom: 1px solid rgba(242, 244, 247, 1);
	
		.li-right1 {
			display: flex;
			align-items: center;
	
			.right-icon1 {
				height: 26rpx;
				width: 14rpx;
			}
	
			.right-img1 {
				width: 84rpx;
				height: 84rpx;
				margin-right: 40rpx;
			}
	
			.right-text1 {
				font-size: 16px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 22.4px;
				color: rgba(34, 34, 34, 1);
				margin-right: 40rpx;
			}
	
		}
	
		.li-left1 {
			display: flex;
			align-items: center;
	
			.left-icon1 {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
	
			.left-text1 {
				font-size: 16px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 23.17px;
				color: rgba(107, 118, 130, 1);
			}
		}
	}
</style>